<template>
  <div class="tagCtn" v-if="talk">
    <div
      class="articleTag"
      @click="favorDetail(item)"
      v-for="(item, index) in talkList"
      :key="index"
    >
      #{{ item }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    talk: {
      type: String,
    },
  },
  data() {
    return {
      talkList: "",
    };
  },
  watch: {
    talk: {
      handler(newVal) {
        if (newVal) {
          this.talkList = this.talk.split(",").filter((e) => {
            return e;
          });
        }
      },
    },
  },
  created() {
    if (this.talk) {
      this.talkList = this.talk.split(",").filter((e) => {
        return e;
      });
    }
  },
  methods: {
    //标签详情
    favorDetail(name) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/favorTag",
        query: { name: `${name}` },
      });
    },
  },
};
</script>

<style scoped>
.tagCtn {
  display: flex;
}
.articleTag {
  width: fit-content;
  height: 0.32rem;
  background: #fffce5;
  opacity: 1;
  text-align: center;
  border-radius: 0.4rem;
  padding-left: 0.16rem !important;
  box-sizing: border-box;
  padding-right: 0.16rem !important;
  display: flex;
  align-items: center;
  margin-right: 0.12rem;
  cursor: pointer;
  margin-top: 0.06rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(9, 9, 9, 1);
}
</style>
